<template>
  <div class="form-control">
    <label :for="id">{{ label }}</label>
    <textarea
      v-if="controlType === 'textarea'"
      :rows="rows"
      :id="id"
      :modelValue="value"
      @input="input"
    />
    <input
      v-else
      :type="{ type }"
      :id="id"
      :modelValue="value"
      @input="input"
    />
  </div>
</template>
<script>
export default {
  props: {
    controlType: String,
    id: String,
    label: String,
    rows: String,
    value: String,
    type: {
      type: String,
      default: "text",
    },
  },
  methods: {
    input(event) {
      this.$emit("update:modelValue", event.target.value);
    },
  },
};
</script>
<style scoped>
input,
textarea {
  display: block;
  width: 100%;
  font: inherit;
  border: none;
  border-bottom: 2px solid #ccc;
  border-radius: 3px 3px 0 0;
  background: white;
  padding: 0.15rem 0.25rem;
  transition: border-color 0.1s ease-out;
}

input:focus,
textarea:focus {
  border-color: #e40763;
  outline: none;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  width: 100%;
}

.form-control {
  padding: 0.5rem 0;
  width: 100%;
  margin: 0.25rem 0;
}
</style>
